<template>
    <div class="sweiper-marquee">
        <swiper :options="swiperOption" v-if="rankListShow" class="red-list swiper-no-swiping" ref="mySwiper" @someSwiperEvent="callback">
            <!-- slides -->
            <swiper-slide class="red-list-item" v-for="(value,key) in rankList" v-if="key < 5" :key="key">
                <div class="list-header-wrap">
                    <img :data-userId="value.userId" class="list-user-header" :src="value.photo"
                         alt=""/>
                    <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                </div>
                <span class="list-user-name">{{value.name}}</span>
                <span class="list-price">
                    <span class="price">{{value.receivedAmount}}</span>元
                </span>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    /*说明：这个是上下表单轮播的形式*/
    export default {
        name: "SwiperMarquee",
        props:{
            swiperOptionProps:{type:Object},
            rankListProps:{type:Array},
        },
        data(){
            return{
                rankList:[],
                swiperOption:{
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    direction: 'vertical',
                    loop: true,
                    observer: true,
                    observeParents: true,
                    autoplay: 3000,
                    loopedSlides: length,
                    slidesPerGroup: 1,
                    slidesPerView: length > 2 ? 3 : length,
                    lazy: {
                        loadPrevNext: true,
                    },
                    onSlideChangeEnd: function(){
                        /*TODO 由于swiper个数太多的时候会导致弹出框延迟很大，所以要在这里重新去获取列表数据，要不然就直接只显示5个*/
                    }.bind(this),
                },
                rankListShow:false,
            }
        },
        mounted(){
            this.swiperOption = Object.assign({},this.swiperOption,this.swiperOptionProps);
            this.rankList = this.rankListProps;
            this.rankListShow = true;
        },
        methods:{
            callback(){
            }
        }
    }
</script>

<style scoped lang="scss">
    @import url($css_root + 'css/swiper.min.css');
    .red-list{
        max-height: 1.5rem;
    }
    .red-list-item{
        padding: 0 .15rem;
        position: relative;
        -webkit-display: flex;
        display: flex;
        height: .5rem;
        -webkit-align-items: center;
        align-items: center;
    }
    .list-header-wrap{
        display: inline-block;
        width: .3rem;
        height: .3rem;
        margin-right:.1rem ;
        overflow: hidden;
        border-radius: 50%;
    }
    .list-user-name{
        -webkit-flex: 1;
        flex: 1;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .list-price{
        color: #666;
        font-size: .14rem;
    }
    .list-price .price{
        color: #EC4C4C;
        font-size: .18rem;
    }
</style>